<template>
  <s-layout
    title="我的订单"
    navbar="custom"
    :showLeftButton="true"
    navbarMode="normal"
    :bgStyle="template.style?.background"
    :navbarStyle="template.style?.navbar"
    onShareAppMessage
    :showFloatButton="true"
  >
    <view>
      <view class="tick-tab-list">
        <view
          class="tick-tab-item"
          @click="getTab(index)"
          :class="{ 'tab-sel': index == tabIndex }"
          v-for="(value, index) in tabList"
          :key="index"
        >
          {{ value.text }}
          <view class="bottoms" v-if="index == tabIndex"></view>
        </view>
      </view>
      <scroll-view scroll-y="true" class="scroll-Y">
        <view
          class="tick-lists"
          v-for="(value, index) in dataList"
          :key="index"
          @click="getDetails(value)"
        >
          <view class="tick-list-top">
            <view class="tock-shop-name">{{
              value.backParams.cinemaName
            }}</view>
            <view class="tock-list-status" v-if="value.status == 1"
              >待支付</view
            >
            <view class="tock-list-status" v-if="value.status == 4"
              >待出票</view
            >
            <view class="tock-list-status" v-if="value.status == 2"
              >已出票</view
            >
            <view class="tock-list-status" v-if="value.status == 3"
              >出票失败</view
            >
            <!-- <view class="tock-list-status" v-if="value.status==4">已完成</view> -->
            <!-- <view class="tock-list-status" v-if="value.status==5">售后</view> -->
          </view>
          <view class="tick-list-info">
            <view class="film-cover">
              <image :src="value.backParams.filmPic"></image>
            </view>
            <view class="film-list-ret">
              <view class="film-name">{{ value.backParams.filmName }}</view>
              <view class="film-time"
                >{{ value.backParams.seats.length }}张 I
                {{ getTime(value.backParams.filmShowTime) }}
              </view>
              <view class="film-time"> 订单编号：{{ value.orderNumber }} </view>
            </view>
          </view>
        </view>
        <s-empty
          v-if="dataList.length == 0"
          icon="/static/order-empty.png"
          text="暂无数据"
        ></s-empty>
      </scroll-view>
    </view>
  </s-layout>
</template>

<script>
// import {getOrderList} from "@/api/film.js"
import sheep from "@/sheep";
export default {
  data() {
    return {
      tabList: [
        {
          text: "全部",
        },
        {
          text: "待付款",
        },

        {
          text: "已出票",
        },
        {
          text: "出票失败",
        },
        {
          text: "待出票",
        },
        // {
        // 	text: '已完成'
        // },
        // {
        // 	text: '售后'
        // },
        // {
        // 	text: '待收货'
        // },
        // {
        // 	text: '已完成'
        // },
        // {
        // 	text: '退款'
        // },
      ],
      tabIndex: 0,
      page: 1,
      dataList: [],
      isPage: true,
    };
  },
  onReachBottom() {
    if (this.isPage) {
      this.page++;
      this.getData();
    }
  },
  computed: {
    template() {
      return sheep.$store("app").template.user;
    },
  },
  onLoad(opt) {
    if (opt.status) {
      if (opt.status == "1") {
        this.tabIndex = 0;
        this.getData();
      } else {
        this.tabIndex = 2;
        this.getData(opt.status);
      }
    } else {
      this.getData();
    }
  },
  methods: {
    getDetails(value) {
      if (value.status === "4") {
        uni.showToast({
          icon: "none",
          title: "订单正在出票，请耐心等待",
        });
        return;
      }
      if (value.status === "3") {
        uni.showToast({
          icon: "none",
          title: "订单出票失败",
        });
        return;
      }
      console.log("value", value);
      if (value.status === "2") {
        sheep.$router.go(
          `/pages/movie/order-detail?orderNumber=${value.orderNumber}`
        );
      }
      if (value.status === "1") {
        uni.redirectTo({
          url: `/pages/movie/pay?orderNumber=${value.orderNumber}`,
        });
      }
    },
    getTime(timestamp) {
      // console.log('parseInt(timestamp,13)',typeof(Number(timestamp)))
      const date = new Date(Number(timestamp));
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const hours = String(date.getHours()).padStart(2, "0");
      const minutes = String(date.getMinutes()).padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}`;
    },
    getTab(index) {
      if (this.tabIndex != index) {
        this.tabIndex = index;
        this.page = 1;
        this.isPage = true;
        this.dataList = [];
        if (index == 0) {
          this.getData();
        } else if (index == 1) {
          this.getData("1");
        } else if (index == 2) {
          this.getData("2");
        } else if (index == 3) {
          this.getData("3");
        } else if (index == 4) {
          this.getData("4");
        }
        // else if (index == 5) {
        // 	this.getData('4')
        // }
        else if (index == 6) {
          this.getData("5");
        }
      }
    },
    async getData(status) {
      let params = {};
      if (status) {
        params.status = status;
      }
      const res = await sheep.$api.movie.getMovieList(params);
      if (res.code === 200) {
        const array = res.data.map((item) => {
          item.backParams = JSON.parse(item.backParams);
          return item;
        });
        this.dataList = array;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f4f5f7;
}

.scroll-Y {
  margin-top: 20rpx;
  height: calc(100vh - 320rpx);
  overflow: hidden;
}

.tick-tab-list {
  display: flex;
  background-color: #ffffff;
  padding: 30rpx 0rpx;
  align-items: center;
  padding-top: 200rpx;

  .tick-tab-item {
    width: 16.66%;
    text-align: center;
    color: #636775;
    font-size: 28rpx;
    position: relative;
  }

  .tab-sel {
    color: #2d3039 !important;
    font-size: 32rpx !important;
    font-weight: 550;
  }

  .bottoms {
    position: absolute;
    bottom: -30rpx;
    right: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52rpx;
    height: 8rpx;
    background-color: #fe602b;
    // border-radius: 5rpx 5rpx 0px 0px;
  }
}

.tick-lists {
  margin: 20rpx 32rpx 0rpx 32rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx 32rpx;

  .tick-list-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .tock-shop-name {
      color: #636775;
      font-size: 28rpx;
      width: 80%;
    }

    .tock-list-status {
      color: #fe602b;
      font-size: 28rpxsssssssss;
    }
  }

  .tick-list-info {
    margin-top: 28rpx;
    display: flex;

    .film-cover {
      width: 116rpx;
      height: 140rpx;

      image {
        width: 116rpx;
        height: 140rpx;
        border-radius: 10rpx;
      }
    }

    .film-list-ret {
      margin-left: 20rpx;

      .film-name {
        color: #2d3039;
        font-size: 32rpx;
        font-weight: 550;
        margin-top: 8rpx;
      }

      .film-time {
        color: #636775;
        font-size: 28rpx;
        margin-top: 16rpx;
      }
    }
  }
}
</style>
